<template>
  <div class="home">

  	<section >
  		<div class="search-box">
			<van-search v-model="search_text" placeholder="请输入搜索关键词" show-action shape="round" @search="onSearch">
			  	<div class="go-login" slot="action" @click="goLogin">登录</div>
			</van-search>
  		</div>
		
		<van-swipe style="height: 35vw;" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="(image,index) in images" :key="index">
				<img :src="image" class="banner-image"/>
			</van-swipe-item>
		</van-swipe>

		<van-grid :column-num="3">
			<van-grid-item v-for="(item, index) in bannerList" :key="index" style="border:none;" class="banner-box">
			    <van-image class="image-banner" :src="item.img" />
			    <span>{{item.text}}</span>
		    </van-grid-item>
		    
		</van-grid>
  	</section>
   

	
  </div>
</template>

<script>

export default {
  name: 'home',
  components: {
  },
  data() {
  	return {
  		search_text: '',
  		images: [
  			require('../assets/images/mobile-banner1.jpg'),
  			require('../assets/images/mobile-banner2.jpg'),
  			require('../assets/images/mobile-banner3.jpg')
  		],
  		bannerList: [
  			{
  				text: '京东超市',
  				img: 'https://img.yzcdn.cn/vant/apple-1.jpg'
  			},
  			{
  				text: '数码电器',
  				img: 'https://img.yzcdn.cn/vant/apple-2.jpg'
  			},
  			{
  				text: '京东服饰',
  				img: 'https://img.yzcdn.cn/vant/apple-1.jpg'
  			},
  			{
  				text: '京东生鲜',
  				img: 'https://img.yzcdn.cn/vant/apple-1.jpg'
  			},
  			{
  				text: '京东到家',
  				img: 'https://img.yzcdn.cn/vant/apple-1.jpg'
  			},
  			{
  				text: '重置缴费',
  				img: 'https://img.yzcdn.cn/vant/apple-1.jpg'
  			}
  		]
  	}
  },

  methods: {
  	goLogin(){

  	},
  	onSearch() {

  	}

  }

}
</script>

<style lang="scss">
	.van-search__action:active {
		background-color: #e43130!important;
	}
	.home {
		background-color: #ccc!important;
		
		.banner-image {
			width: 100%;
			height: 100%;
		}
		.search-box{ 
			.go-login {
				font-size:  3.73vw;
				font-weight: 700;
				/deep/.van-search__action:active {
					background-color: #e43130!important;
				}
			}
			background-color: transparent;
			.van-search.van-search--show-action {
				background-color: #e43130!important;
			}
			.van-search__content.van-search__content--round {
				// background-color: transparent!important;
				// border: 1px solid #fff;
			}
		}
		

	}

	.banner-box {
		background-color: #f6f6f6;
		.image-banner {
			border-radius: 50%;
			width:  70px;
			height: 70px;
			img {
				border-radius: 50%;
			}
			margin-bottom: 15px;
		}
		span {
			font-size: 18px;

		}
	}
	

	.van-grid-item__content::after {
		border: none!important;
		
	}
	.van-grid-item__content--center {
		padding: 0!important;
		border: none;
	}
	

</style>
